<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script src="../js/vue.js"></script>
</head>
<body>

<!--
   插值语法中的运算
   1. 姓名转换成全大写  toUpperCase()
   2. 支持数学运算
   3.比较运算
   4. 逻辑运算
   5.三目运算

注意: 使用插值语法进行运算时,一般是一些简单的运算,比较复杂的运算不要使用插值语法,后续可以通过vue中提供的计算属性
这些表达式会在所属 Vue 实例的数据作用域下作为 JavaScript 被解析。有个限制就是，每个绑定都只能包含单个表达式，
所以下面的例子都不会生效:
  1.  这是语句，不是表达式
       {{ var a = 1 }}
 2.流控制也不会生效，请使用三元表达式
     {{ if (ok) { return message } }}

双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，你需要使用 v-html 指令

-->
<div id="app">
    <h2>{{title}}</h2>
    <p>姓名:{{stuName.toUpperCase()}}</p>
    <p>年龄:{{age + 10}}</p>
    <p>是否成年:{{age >= 18}}</p>
    <p>是否成年:{{age >= 18 ? "成年":"未成年"}}</p>
    <p>flag:{{flag && true}}</p>
    <p>{{info}}</p>
<!--    <p>var:{{var a = 1}}</p>-->
</div>

<script>
  let vm = new Vue({
      el:'#app',
      data:{
        title:'学生信息展示',
        stuName:"tom",
        age:15,
        flag:true,
        info:"<h2>hello  vue2</h2>"
      },
      methods:{}
    })
</script>
</body>
</html>